<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新用户注册-会员中心</title>
    <link rel="stylesheet" href="./fonts/demo.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./css/register.css">
    <link rel="shortcut icon" href="./image/logo.ico" /> 
    <script src="./js/ajax.js"></script>
    <script src="./js/jquery-3.6.0.js"></script>
    <script src="./js/layer.js"></script>
</head>
<body>
    <div class="box">
        <div class="navbar">
            <div class="navbar-center">
                <a href="./home.html">
                    <img src="https://statics6.casiostore.com.cn/publics/images/pc/casio-new-logo.png">
                </a>
            </div>
        </div>
        <div class="page">
            <div class="panel-heading">
                注册成为C's Club的会员
            </div>
            <div class="panel-body">
                <div class="form-register">
                    <div class="form-group">
                        <span class="control-label">
                            手机号:
                        </span>
                        <div class="control-right">
                            <i class="iconfont">&#xe603;</i>
                            <input type="phone" name="phone" placeholder="请输入手机号码">
                        </div>
                    </div>
                    <!-- <div class="form-group">
                        <span class="control-label">
                            验证码:
                        </span>
                        <div class="control-right">
                            <i class="iconfont">&#xe61a;</i>
                            <input type="text" placeholder="请输入验证码"style="width: 176px;">
                        </div>
                        <button type="button">获取验证码</button>
                    </div> -->
                    <div class="form-group">
                        <span class="control-label">
                            密码:
                        </span>
                        <div class="control-right">
                            <i class="iconfont">&#xe621;</i>
                            <input type="password" name="password" placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <span class="control-label">
                            性别:
                        </span>
                        <select name="sex" style="margin-left: 40px;">
                            <option>请选择</option>
                            <option>男</option>
                            <option>女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <span class="control-label">
                            出生年月:
                        </span>
                        <select>
                            <option>年</option>
                            <option value="1950">1950</option>
                            <option value="1951">1951</option>
                            <option value="1952">1952</option>
                            <option value="1953">1953</option>
                            <option value="1954">1954</option>
                            <option value="1955">1955</option>
                            <option value="1956">1956</option>
                            <option value="1957">1957</option>
                            <option value="1958">1958</option>
                            <option value="1959">1959</option>
                            <option value="1960">1960</option>
                            <option value="1961">1961</option>
                            <option value="1962">1962</option>
                            <option value="1963">1963</option>
                            <option value="1964">1964</option>
                            <option value="1965">1965</option>
                            <option value="1966">1966</option>
                            <option value="1967">1967</option>
                            <option value="1968">1968</option>
                            <option value="1969">1969</option>
                            <option value="1970">1970</option>
                            <option value="1971">1971</option>
                            <option value="1972">1972</option>
                            <option value="1973">1973</option>
                            <option value="1974">1974</option>
                            <option value="1975">1975</option>
                            <option value="1976">1976</option>
                            <option value="1977">1977</option>
                            <option value="1978">1978</option>
                            <option value="1979">1979</option>
                            <option value="1980">1980</option>
                            <option value="1981">1981</option>
                            <option value="1982">1982</option>
                            <option value="1983">1983</option>
                            <option value="1984">1984</option>
                            <option value="1985">1985</option>
                            <option value="1986">1986</option>
                            <option value="1987">1987</option>
                            <option value="1988">1988</option>
                            <option value="1989">1989</option>
                            <option value="1990">1990</option>
                            <option value="1991">1991</option>
                            <option value="1992">1992</option>
                            <option value="1993">1993</option>
                            <option value="1994">1994</option>
                            <option value="1995">1995</option>
                            <option value="1996">1996</option>
                            <option value="1997">1997</option>
                            <option value="1998">1998</option>
                            <option value="1999">1999</option>
                            <option value="2000">2000</option>
                            <option value="2001">2001</option>
                            <option value="2002">2002</option>
                            <option value="2003">2003</option>
                            <option value="2004">2004</option>
                            <option value="2005">2005</option>
                            <option value="2006">2006</option>
                            <option value="2007">2007</option>
                            <option value="2008">2008</option>
                            <option value="2009">2009</option>
                            <option value="2010">2010</option>
                            <option value="2011">2011</option>
                            <option value="2012">2012</option>
                            <option value="2013">2013</option>
                            <option value="2014">2014</option>
                            <option value="2015">2015</option>
                            <option value="2016">2016</option>
                            <option value="2017">2017</option>
                            <option value="2018">2018</option>
                            <option value="2019">2019</option>
                            <option value="2020">2020</option>
                            <option value="2021">2021</option>
                        </select>
                        <select>
                            <option>月</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                        </select>
                        <select>
                            <option>日</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                        </select>
                        <p>生日保存成功不可修改，请谨慎填写呦!</p>
                    </div>
                    <div class="form-group">
                        <span class="control-label">
                            所在直辖市:
                        </span>
                        <select name="province" style="width: 155px;margin: 0;">
                            <option value="0">省/直辖市</option>
                        </select>
                        <select name="city" style="width: 155px;margin: 0;">
                            <option value="0">市</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label style="margin-left:120px">
                            <input type="checkbox" name="agreement" data-required-error="请您先同意协议">
                            <span class="aa">我已阅读并同意</span> 
                            <a href="https://www.casiostore.com.cn/support/agreement.html" class="welfare text-decorati">《用户注册协议》</a>
                        </label>
                    </div>
                    <div class="form-buttons">
                          <button type="submit" class="btn btn-primary btn-login btn-lg btn-block btn-black reg-btn disabled">完成注册</button>
                    </div>
                    <div class="form-other-link">
                        <a href="">已有账号，去登录</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-footer-simple">
        <div class="panel-body">
            <p>
                <a href="./home.html">C's Club</a>
                &nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="">帮助中心</a>
                &nbsp;&nbsp;|&nbsp;
                <a href="">
                    <i class="iconfont">&#xe631;</i>在线客服
                </a>
                <span>
                    <i class="iconfont">&#xe604;</i>400-700-6655&nbsp;(周一至周日&nbsp;9:00-21:00)
                </span>
            </p>
            <p class="keep-on-record">
                <a href="">卡西欧官方商城</a>
                <span>
                    <a href=""> 京ICP备 10009123号-10</a>
                </span>
            </p>
        </div>
    </div>
</body>
<script>
document.querySelector('.form-buttons').onclick = function(){
    var phone = document.querySelector('[name="phone"]').value
    var password = document.querySelector('[name="password"]').value
    var sex = document.querySelector('[name="sex"]').value
    if(phone === ''){
        alert('用户名不能为空')
        return false;
    }
    if(password === ''){
        alert('密码不能为空')
        return false;
    }
    if(sex === ''){
        alert('性别不能为空')
        return false;
    }
    $.get("./php/register.php",{
        phone,
        password
    },res=>{
     let {meta:{status,msg},data} = res;
     if(status===1){
         layer.msg(msg,{
             icon:1,
             time:1500
         },function(){
             location.href = "login.html"
         })
     }else{
         layer.msg(msg,{
             icon:2,
             time:1500
         })
     }
    },'json')
}
</script>
<script src="./js/register.js"></script>
</html>